<template>
  <div class="search">
    <el-autocomplete @select="goDetail"  v-model="hosname" :fetch-suggestions="fetchData" :trigger-on-focus="false" clearable placeholder="请输入医院名称" class="form"/>
    <el-button type="primary" size="default" :icon="Search">搜索</el-button>
  </div>
</template>

<script setup lang="ts">
// 引入element-plus提供的图标
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ref } from 'vue';
// 引入请求方法
import {reqHospitalInfo} from '../../../api/home'
import type {HospitalInfo} from '../../../api/home/type'
// 创建路由器对象
let $router = useRouter();
// 收集搜索的关键字(医院的名字)
let hosname = ref<string>('')
// 顶部组件的回调
const fetchData = async (keyword:string,cb:any)=>{
  // 当用户输入完关键字函数会执行一次
  let resule:HospitalInfo = await reqHospitalInfo(keyword)
  console.log(resule);
  // 整理数据，变成人家组件需要的数据格式
  let showData = resule.data.map(item=>{
    return{
      value:item.hosname, //展示医院的名字
      hoscode:item.hoscode //存储医院的编码
    }
  })
  // 给组件提供展示的户数
  cb(showData)
}

// 点击某一个推荐项
const goDetail = (item:any)=>{
  // 点击推荐项跳转
  $router.push({path:'/hospital',query:{hoscode:item.hoscode}})
}
</script>



<script lang="ts">
export default {
  name: "Search",
};
</script>

<style scoped lang="scss">
.search{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  :deep(.form){
    width: 600px;
    margin-right: 5px;
  }
}
</style>